<template>
  <div class="songSheetTit">
    <span class="songSheetName">{{ $route.query.cat || "全部" }}</span>
    <div class="classificationBox">
      <div class="btnClass">
        <span @click="hideOrShow"
          >选择分类 <i class="iconfont icon-icon1 dowArrow"></i
        ></span>
      </div>
      <div class="categoryBox" v-show="isHide">
        <div class="categoryTop">
          <i class="iconTe"></i>
        </div>
        <ul class="categoryItemBox">
          <div class="categoryAll">
            <div class="btnClass" @click="emitChengeCatTxt('全部')">
              <span>全部风格</span>
            </div>
          </div>
          <li
            v-for="(item, index) in classificationData"
            :key="index"
            class="categoryItem"
          >
            <span class="categoryName">{{ item.name }}</span>
            <ul class="categoryVal">
              <template v-for="(itemTwo, index) in item.arr">
                <li :key="'A' + index" @click="emitChengeCatTxt(itemTwo.name)">
                  {{ itemTwo.name }}
                </li>
                <span :key="'B' + index">|</span>
              </template>
            </ul>
          </li>
        </ul>
        <div class="categoryFooter"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { SongListClassification } from "@/api";
export default {
  data() {
    return {
      classificationData: [],
      isHide: false,
    };
  },
  created() {
    this.getDate();
  },
  methods: {
    //获取分类数据
    getDate() {
      SongListClassification().then((res) => {
        for (const key in res.categories) {
          this.classificationData.push({
            name: res.categories[key],
            arr: [],
          });
        }
        res.sub.forEach((item, index) => {
          this.classificationData[item.category].arr.push(item);
        });
        // console.log(this.classificationData);
      });
    },
    hideOrShow() {
      this.isHide = !this.isHide;
    },
    emitChengeCatTxt(str) {
      this.$router.push({
        name: "songsheet",
        query: { cat: str },
      });
      this.isHide = !this.isHide;
    },
  },
};
</script>

<style lang="scss" scoped>
.songSheetTit {
  height: 40px;
  border-bottom: 2px solid #c20c0c;
  .songSheetName {
    font-size: 24px;
    vertical-align: middle;
    font-weight: normal;
  }
  .btnClass {
    color: #0c73c2;
    background: url("./../../assets/imges/backgroundStripe.png") no-repeat right -100px;
    padding: 0 5px 0 0;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    span {
      padding: 0 10px 0 15px;
      height: 31px;
      line-height: 30px;
      display: inline-block;
      min-width: 23px;
      background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -59px;
      cursor: pointer;
    }
    .dowArrow {
      font-size: 12px;
    }
  }
  .classificationBox {
    display: inline-block;
    margin-left: 10px;
    position: relative;
    .categoryBox {
      text-align: left;
      width: 720px;
      display: inline-block;
      position: absolute;
      left: -100%;
      top: 100%;
      z-index: 999;
      .categoryTop {
        height: 32px;
        background: url("./../../assets/imges/backgroundTwo.png") no-repeat;
        .iconTe {
          background: url("./../../assets/imges/btnIcon.png") no-repeat -48px 0;
          position: absolute;
          top: 2px;
          left: 132px;
          display: inline-block;
          width: 24px;
          height: 11px;
        }
      }
      .categoryAll {
        height: 37px;
        padding-left: 26px;
        border-bottom: 1px solid #e6e6e6;
        span {
          color: #333;
        }
      }
      .categoryItemBox {
        width: 700px;
        background: url("./../../assets/imges/backgroundTwo.png") no-repeat -720px
          0;
        background-repeat: repeat-y;
        padding: 0 10px;
        .categoryName {
          float: left;
          padding-top: 15px;
          margin-left: 56px;
          line-height: 24px;
          font-weight: 700;
        }
        .categoryVal {
          margin-left: 96px;
          padding: 16px 15px 0 15px;
          border-left: 1px solid #e6e6e6;
          line-height: 24px;
          li {
            display: inline;
            color: #333;
            cursor: pointer;
            white-space: nowrap;
          }
          span {
            margin: 0 8px 0 10px;
            color: #d8d8d8;
          }
        }
        .categoryItem:last-child {
          .categoryVal {
            padding-bottom: 25px;
          }
        }
      }
      .categoryFooter {
        background: url("./../../assets/imges/backgroundTwo.png") no-repeat -1440px -12px;
        height: 20px;
      }
    }
  }
}
</style>